// 注册全局自定义指令 仅能输入正整数与小数点 不能0开头 不能有特殊符号 v-input-number
// 例：255  255.8
import Vue from "vue";
Vue.directive("input-number", {
    bind(el, binding, vnode) {
        // let input = vnode.elm; //input节点获取
        let input = vnode.elm.children[0]; //el-input节点获取
        if (input.tagName !== "INPUT") {
            input = input.querySelector("input");
        }
        if (!input) return;
        input.addEventListener("compositionstart", () => {
            vnode.inputLocking = true;
        });
        input.addEventListener("compositionend", () => {
            vnode.inputLocking = false;
            input.dispatchEvent(new Event("input"));
        });
        input.addEventListener(
            "input",
            (e) => {
                e.preventDefault(); // 阻止掉默认的change事件
                if (vnode.inputLocking) {
                    return;
                }
                let oldValue = input.value;
                // /[^\d.]/g   去掉小数点则是匹配整数
                let newValue = input.value.replace(/[^\d.]/g, "");
                if (newValue) {
                    switch (binding.value) {
                        case "zeroBefore":
                            break; // 数字随意输，不做处理，如 000013
                        case "zeroCan":
                            newValue = Number(newValue).toString(); // 去掉开头0 正整数 + 0
                            break;
                        default:
                            newValue = newValue.replace(/^\b(0+)/gi, ""); // （默认）去掉开头0 正整数
                    }
                }
                // 判断是否需要更新，避免进入死循环
                if (newValue !== oldValue) {
                    input.value = newValue;
                    input.dispatchEvent(new Event("input")); // 通知v-model更新 vue底层双向绑定实现的原理是基于监听input事件
                    input.dispatchEvent(new Event("change")); // 手动触发change事件
                }
            },
            true // 在捕获阶段处理，目的是赶在change事件之前阻止change事件(非法输入在触发指令之前先触发了change，需要干掉)
        );
    },
});
// 使用事例：
//   <el-input v-input-number placeholder="请输入任意数字"></el-input>
